<template>
  <view class="page-container">
    <nut-grid>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
      <nut-grid-item text="text">
        add
      </nut-grid-item>
    </nut-grid>

    <Counter />

    <view :class="styles['green-wrap']">
      绿色的矩形
      <view :class="styles['yellow-wrap']">
        黄色的矩形
        <view :class="styles['red-wrap']">
          红色的矩形 {{ appNodeEnv }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import styles from './index.module.scss';

import { getParkInfoRequest } from '@/api/common';
import Counter from '@/components/counter/index.vue';
import { useDidShow } from '@/hooks/index';

const appNodeEnv = ref(process.env.TARO_APP_NODE_ENV);

const getParkInfo = () => {
  getParkInfoRequest({ lotCode: 20 }).then(res => {
    console.log('响应结果::', res);
  }).catch((error) => {
    console.log('响应出错::', error);
  });
};

useDidShow(() => {
  console.log('页面加载完成了：：', process.env.TARO_APP_BASE_API);
  getParkInfo();
});
</script>
